<template>
    <div class="home">
        <div class="container">
            <keep-alive>
                <router-view v-wechat-title="$route.meta.title"/>
            </keep-alive>
        </div>
        <cube-tab-bar
                v-model="currentValue"
                :data="tabs"
                @change="changeHandler">
        </cube-tab-bar>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";

    @Component({})
    export default class Index extends Scene {

        private currentValue: string = "/";
        private oldIndex: number = -1;
        private currentIndex: number = -1;

        // private transitionName: string = "";

        public tabs: Array<object> = [{
            value: "/",
            label: "首页",
            icon: "iconfont icon-shouye"
        }, {
            value: "/schedule",
            label: "选课单",
            icon: "iconfont icon-xuankedan"
        }, {
            value: "/mine",
            label: "我的",
            icon: "iconfont icon-gerenziliao"
        }];

        private mounted(): void {
            this.currentValue = this.$route.path;
        }

        private changeHandler(value: string): void {
            this.currentValue = value;
            this.navigateTo({
                path: value
            });
            // if you clicked different tab, this methods can be emitted
            // console.log(value)
        }

        private get transitionName(): string {
            if (this.oldIndex >= 0 && this.currentIndex >= 0) {
                if (this.oldIndex < this.currentIndex) {
                    return "slide-left";
                } else {
                    return "slide-right";
                }
            }
            return "";
        }

        private getTabIndex(v: string): number {
            let index: number = -1;
            for (const i in this.tabs) {
                if ((<any> this).tabs[i].value === v) {
                    index = Number(i);
                    break;
                }
            }
            return index;
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .home
        max-height 100vh;
        max-width 100vw;
        overflow hidden;

    .container
        height calc(100vh - 47px - env(safe-area-inset-bottom));

    .cube-tab-bar
        border-top 1px solid #ddd
        padding-bottom env(safe-area-inset-bottom);
        background #ffffff;

        /deep/ .cube-tab
            font-size 12px

            /deep/ i
                font-size 22px

            /deep/ div
                margin-top 2px


</style>
